<template>
  <div id="app">

    <el-container>

      <el-header>

        <h1 class="h1 fl"><el-avatar :src='`${publicPath}img/logo.jpg`'></el-avatar>{{name}}</h1>

        <el-dropdown class="fr" trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            Admin <i class="el-icon-arrow-down"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item >退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </el-header>

    <el-container>

      <el-aside>

        <app-aside-menu></app-aside-menu>

      </el-aside>

      <el-main>

        <router-view></router-view>

      </el-main>

    </el-container>

    </el-container>

  </div>
</template>

<script>
import axios from 'axios'
import AppAsideMenu from './AppAsideMenu.vue'


export default {

  components: { 
    AppAsideMenu
  },

  data() {
  
      return {
      publicPath: process.env.BASE_URL,
      name: '后台管理'
    }
  },

  methods: {
    handleCommand() {
      this.exit();
    },

    async  exit() {
      let {data} = await axios({
        method: 'post',
        url: '/api/admin/exit'
      });
      console.log(1);
      this.$message({
        message: '退出成功',
        type: 'warning'
      });
      this.$router.push("/admin");
    }
  }

}

</script>
